<template>
  <el-dialog
    :title="!dataForm.selectId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    
    <el-form-item label="组名" prop="attrGroupName">
      <el-input v-model="dataForm.attrGroupName" placeholder="组名"></el-input>
    </el-form-item>
    <!-- <el-form-item label="排序" prop="sort">
      <el-input v-model="dataForm.sort" placeholder="排序"></el-input>
    </el-form-item> -->
    <el-form-item label="描述" prop="descript">
      <el-input v-model="dataForm.descript" placeholder="描述"></el-input>
    </el-form-item>
    <el-form-item label="所属分类" prop="catelogId">
      <el-cascader
        v-model="dataForm.catelogId"
        :options="categorys" :props="props"></el-cascader>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          selectId:'',
          attrGroupId: 3,
          attrGroupName: "",
          catelogId: 1,
          descript: "",
          sort: "",
        },
        // 添加分组数据
        newDataForm:[],
        props:{
          value:"catId",
          label:'name',
          children:"children"
        },
        // 级联菜单数据
        categorys:[],
        dataRule: {
          attrGroupName: [
            { required: true, message: '组名不能为空', trigger: 'blur' }
          ],
          
          descript: [
            { required: true, message: '描述不能为空', trigger: 'blur' }
          ],
          catelogId: [
            { required: true, message: '所属分类id不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created(){
      this.getCategorys()
    },
    methods: {
      async  getCategorys(){
        const {data:res} = await this.$http.get("/dqxmall/prosyscategory/list/tree")
        // console.log (res)
        this.categorys = res.data
      },
       init (id,data) {
         this.dataForm={attrGroupId: '',
          attrGroupName:'',
          catelogId: '',
          descript: '',
          sort: '',}
        this.dataForm.selectId = id || 0
        
        if(this.dataForm.selectId){
          this.dataForm.attrGroupId = data.attrGroupId
          this.dataForm.attrGroupName = data.attrGroupName
          this.dataForm.catelogId = data.catelogId
          this.dataForm.descript = data.descript
          this.dataForm.sort = data.sort
        }
         this.visible = true
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate(async (valid) => {
          if (valid) {
            // 走修改逻辑
            if(this.dataForm.selectId){
              const {data:res} = await this.$http.post("/dqxmall/prosysattrgroup/update",this.dataForm)
              if(res.msg === 'success'){
                this.$emit('updatedata');
                this.visible = false
                this.$message.success("修改成功")
              }
            }
            // 走新增逻辑
            else{
              var data={
                'attrGroupId':  undefined,
                'attrGroupName': this.dataForm.attrGroupName,
                'sort': this.dataForm.sort,
                'descript': this.dataForm.descript,
                'catelogId': this.dataForm.catelogId[this.dataForm.catelogId.length-1]
              }
              const {data:res} = await this.$http.post("/dqxmall/prosysattrgroup/save",data)
              // console.log(res)
              if(res.msg = "success"){
                this.$emit('updatedata');
                this.visible = false
                this.$message.success("添加成功")
              }
            }
           
          }
        })
      }
    }
  }
</script>
